<template>
  <div class="info">
    <form class="login-form">
      <div class="form-item">
        <span>用户名:</span>
        <input type="text" class="txt" readonly="readonly" v-model="userInfo.username">
      </div>

      <div class="form-item">
        <span>性别:</span>
        <input type="text" class="txt" readonly="readonly" v-model="userInfo.gender">
      </div>

      <div class="form-item">
        <span>手机号:</span>
        <input type="text" class="txt" readonly="readonly" v-model="userInfo.tel">
      </div>
    </form>
  </div>
</template>

<script setup>
import {useStore} from "vuex";
import {computed} from "vue";

const store = useStore();

const userInfo = computed(() => store.state.user.userInfo)
</script>

<style scoped>
.info {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>